<template>
    <div class="wrapper" ref="wrapper">
        <div class="content"> 
            <!-- 热门城市 -->
            <div class="hot">
                <p class="hot-title">热门城市</p>
                <ul class="hot-list">
                    <li class="hot-item " v-for="item in hotList" :key="item.id" @click='changeCity(item.name)'>{{item.name}}</li>
                </ul>
            </div>
            <!-- 字母列表 -->
            <div class="letter">
                <p class="letter-title">字母列表</p>
                <ul class="letter-list">

                    <li class="letter-item " v-for="(val,key) in cityList" :key="key"  @click="cityName(key)">{{key}}</li>
                   
                </ul>
            </div>

            <!-- 城市列表 -->
            <div class="list">
                <div v-for="(val,key) in cityList" :ref="key" :key="key">
                    <p class="list-title">{{key}}</p>
                    <ul class="list-list">
                        
                        <li v-for="item in val"  :key="item.id" class="list-item " @click='changeCity(item.name)'>{{item.name}}</li>
                    
                    </ul>
                </div>
            </div>
        
        </div>
    </div>
</template>

<script>
    import {mapMutations} from 'vuex'

    import BScroll from 'better-scroll'
 
    export default {
        props:["hotList",'cityList'],
        data () {
            return {
                scroll:""
            }
        },
        mounted(){
            let dom=this.$refs["warpper"];
            this.scroll=new BScroll(".wrapper");
        },
        methods:{
            cityName(name){
                this.scroll.scrollToElement(this.$refs[name][0])
            },
            changeCity(cityname){
                this.move(cityname);
                this.$router.push("/");
            },
            ...mapMutations(['move'])
        }
    }   
</script>

<style  scoped lang="stylus" >
    @import '~css/common.styl'
    .wrapper{
        position absolute
        left 0
        bottom 0
        right 0
        top .88rem
        background-color #ddd
        overflow hidden
    }
    .hot{
        font-size .28rem
        color #212121
    }
        .hot .hot-title{
            font-size .24rem
            line-height  .7rem
            padding-left .32rem
            
        }
        .hot-list{
            position relative
            background-color #fff
            overflow hidden
            
        }
        
        .hot-list .hot-item{
            position relative
            float left
            width 33.33%
            line-height .8rem
            text-align center
            border-bottom 1px solid #ddd
        }
        .hot-list:before{
            position absolute
            content ''
            width 33.33%
            height 100%
            left 33.33%
            top 0
            border-left 1px solid #ddd
            border-right 1px solid #ddd
        }

        .letter{
            font-size .28rem
            color #212121
        }
            .letter .letter-title{
                font-size .24rem
                line-height  .7rem
                padding-left .32rem
                
            }
            .letter-list{
                padding .2rem 0
                position relative
                background-color #fff
                overflow hidden
                
            }
            
            .letter-list .letter-item{
                float left
                width 16.66%
                line-height .8rem
                text-align center
                
            }

    .list{
        font-size .28rem
        color #212121
    }
        .list .list-title{
            font-size .24rem
            line-height  .7rem
            padding-left .32rem
            
        }
        .list-list{
            position relative
            background-color #fff
            overflow hidden
            
        }
        
        .list-list .list-item{
            position relative
            float left
            width 25%
            line-height .9rem
            text-align center
            border-bottom 1px solid #ddd
            textOverflow()
        }
        .list-list:before{
            position absolute
            content ''
            width 25%
            height 100%
            left 25%
            top 0
            border-left 1px solid #ddd
            border-right 1px solid #ddd
        }
        .list-list:after{
            position absolute
            content ''
            width 25%
            height 100%
            right 25%
            top 0
            
            border-right 1px solid #ddd
        }
       

</style>